// 引入项目中定义的组件，如头像下拉框、用户名组件、底部页脚、文档问题组件
import {Footer, Question} from '@/components';
// 引入图标
import {LinkOutlined} from '@ant-design/icons';
// 引入 ProComponents 的设置抽屉，用于动态修改主题
import {SettingDrawer} from '@ant-design/pro-components';
// 引入路由操作对象 history 和 Link 组件
import {history, Link} from '@umijs/max';
// 引入 request 配置
import {requestConfig} from './requestConfig';
// 引入后端获取登录用户信息的 API
import {getLoginUser} from "@/services/shApi-backend/userController";
import {RunTimeLayoutConfig} from "@@/plugin-layout/types";

// 判断当前环境是否是开发环境
const isDev = process.env.NODE_ENV === 'development';
// 登录页路径
const loginPath = '/user/login';
/**
 * 初始化运行时状态函数
 * 用于在应用启动时获取并保存一些全局状态，如用户登录信息
 */
export async function getInitialState(): Promise<InitialState> {
  // 定义初始状态对象，包含 loginUser
  const state: InitialState = {
    loginUser: undefined,
  };

  try {
    // 调用接口获取当前登录用户信息
    const res = await getLoginUser();
    console.log(res.data);
    // 如果响应成功并且有数据，设置 loginUser
    if (res.data && res.code === 0) {
      state.loginUser = res.data;
    }
  } catch (error) {
    // 若接口请求失败，跳转到登录页
    history.push(loginPath);
  }

  return state;
}

/**
 * ProLayout 布局配置函数
 * 接收初始状态和设置状态函数，返回布局相关配置
 */
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    // 页面右上角操作区域的内容，比如文档问题按钮
    actionsRender: () => [<Question key="doc" />],

    // 设置水印显示当前用户名
    waterMarkProps: {
      content: initialState?.loginUser?.userName,
    },

    // 页面底部渲染 Footer 组件
    footerRender: () => <Footer />,

    // 页面路由变化时触发的回调函数
    onPageChange: () => {
      const { location } = history;
      // 页面跳转时校验登录状态，如果未登录且不在登录页，跳转到登录
      // （目前注释掉了）
      // if (!initialState?.loginUser && location.pathname !== loginPath) {
      //   history.push(loginPath);
      // }
    },

    // 背景图片列表，用于增强 UI 效果
    bgLayoutImgList: [
      {
        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/D2LWSqNny4sAAAAAAAAAAAAAFl94AQBr',
        left: 85,
        bottom: 100,
        height: '303px',
      },
      {
        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/C2TWRpJpiC0AAAAAAAAAAAAAFl94AQBr',
        bottom: -68,
        right: -45,
        height: '303px',
      },
      {
        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/F6vSTbj8KpYAAAAAAAAAAAAAFl94AQBr',
        bottom: 0,
        left: 0,
        width: '331px',
      },
    ],

    // 链接列表（只在开发环境中显示）
    links: isDev
      ? [
        <Link key="openapi" to="/" target="_blank">
          <LinkOutlined />
          <span>SHOpenAPI 文档</span>
        </Link>,
      ]
      : [],

    // 不渲染菜单头部（logo 旁边的项目名称）
    menuHeaderRender: (logoDom, titleDom) => {
      return (
        <div
          style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
          onClick={() => {
            window.location.href = '/user/info'; // 强制跳转
          }}
        >
          {logoDom}
          <h3 style={{ margin: 0, paddingLeft: 8 }}>{titleDom.props.children}</h3>
        </div>
      );
    },

    // 渲染子内容的包裹组件，可用于添加设置抽屉等功能
    childrenRender: (children) => {
      // 如果状态是加载中，可返回加载页（注释掉了）
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          {children}
          {/* 仅在开发环境中显示设置抽屉，可切换暗黑主题 */}
          {isDev && (
            <SettingDrawer
              disableUrlParams // 不使用 URL 中的参数控制设置
              enableDarkTheme  // 启用暗黑主题开关
              settings={initialState?.settings}
              onSettingChange={(settings) => {
                // 当用户修改设置时更新 initialState 中的 settings
                setInitialState((preInitialState) => ({
                  ...preInitialState,
                  settings,
                }));
              }}
            />
          )}
        </>
      );
    },

    // 将 initialState 中的设置项扩展到 layout 中，如 theme、布局模式等
    ...initialState?.settings,
  };
};

/**
 * 网络请求配置
 * 包括错误统一处理、请求拦截器等
 * 文档：https://umijs.org/docs/max/request#配置
 */
export const request = requestConfig;
